<template>
  <div ref="barChartRef" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, markRaw, defineProps } from "vue";
import * as echarts from "echarts";

// 接收参数
const props = defineProps({
  title: String,
  unit: String,
  data: {
    type: Array as string[],
    default: {}
  },
  chartInfo: {
    type: Object,
    default: {
      grid: {
        top: "10%",
        left: "2%",
        right: "2%",
        bottom: "10%",
        containLabel: true
      },
      barWidth: 50,
      interval: 0
    }
  }
});
const name = props.data.map(item => item.name);
const value = props.data.map(item => item.value);
const dataLength = props.data.length;
const title = props.title;
const unit = props.unit;
const grid = props.chartInfo.grid;
const barWidth = props.chartInfo.barWidth;
const interval = props.chartInfo.interval;

// 图表绘制逻辑
const barChartRef = ref<HTMLDivElement | null>(null);
const barChartRefInstance = ref<echarts.ECharts | null>(null);
const initBarOption = ref<echarts.EChartOption>({});

const color: string[] = [
  "#2b89f8",
  "#fa512a",
  "#00ffff",
  "#409B5C",
  "#ffe000",
  "#ffa800",
  "#ff5b00"
];
let toolTimer = ref<any>(null);

initBarOption.value = {
  title: {
    show: false,
    text: "",
    left: "center",
    textStyle: {
      color: "#fff"
    }
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    },
    formatter: function (params) {
      const item = params[0];
      return `<p style="color: ${item.color}">${item.name}:${item.value}</p>`;
    }
  },
  grid: grid,
  xAxis: {
    type: "category",
    data: name,
    axisLine: {
      show: true,
      lineStyle: {
        color: "#6a6a6a"
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      fontSize: 13,
      interval: interval
    }
  },
  yAxis: {
    name: title + "(" + unit + ")",
    type: "value",
    axisLine: {
      show: false,
      lineStyle: {
        // width: 1,
        color: "#6a6a6a"
      }
    },
    splitLine: {
      show: false,
      lineStyle: {
        // width: 1,
        type: "dashed",
        color: "#6a6a6a"
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      fontSize: 13
    }
    // boundaryGap: ['20%', '20%'],
  },
  dataZoom: {
    start: 0,
    end: 100,
    type: "inside"
  },
  series: [
    {
      name: "",
      type: "bar",
      barWidth: barWidth,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#4B87FFFF" },
          { offset: 1, color: "#82BCFFFF" }
        ])
      },
      data: value
    }
  ]
};

const initBarChart = () => {
  if (barChartRef.value) {
    barChartRefInstance.value = markRaw(echarts.init(barChartRef.value));
    barChartRefInstance.value.setOption(initBarOption.value, true);
  }
};

// tooltip自动轮播 若使用请做销毁处理
if (initBarOption.value && typeof initBarOption.value === "object") {
  let index = 0;
  toolTimer.value = setInterval(function () {
    barChartRefInstance.value.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: index
    });
    index++;
    if (index >= dataLength) {
      index = 0;
    }
  }, 3000);
}

// 挂载后动作 -- 初始化图表
onMounted(() => {
  initBarChart();
  // 图表自适应
  window.addEventListener("resize", () => {
    if (barChartRefInstance.value) {
      barChartRefInstance.value.resize();
    }
  });
});

// 销毁前动作 -- 销毁图表
onBeforeUnmount(() => {
  if (barChartRefInstance.value) {
    barChartRefInstance.value.dispose();
  }
  if (toolTimer.value) {
    clearInterval(toolTimer.value);
  }
});
</script>

<style scoped lang="scss"></style>
